<template>
  <div class="main">
    <div class="a1">
        <img src="../assets/开始答题/btn1.png" alt="">
      <h2>新型冠状病毒测试</h2>
      <div class="p1"><span>&nbsp; &nbsp;</span>&nbsp; &nbsp;疫情就是命令，
        防控就是责任！AI党建云、101VR邀请您一起参与“抗击肺炎-科普知识”学习，更有【新型肺炎疫情监控大屏】免费赠送</div>

      <!-- <p class="p2">指导语：请仔细阅读一下问题，每个问题都从非常不符合到非常符合有5种选择。请根据描述选择符合您情况的问题</p> -->
    </div>
    <div class="a2" @click="go">开始答题</div>
  </div>
</template>

<script>
import axios from "axios";
import  { global } from '../global'
export default {
  data() {
    return {};
  },
  created(){
    // axios.post('/api/news1').then((res)=>{
    //   console.log(res)
    // })

    // axios.get('/api/news',{
    //   params:{
    //     paindex:1,
    //     pasixe:3
    //   }
    // }).then((res)=>{
    //   console.log(res)
    // })
  },
  methods: {
    go() {
      // global.loadsound();
      this.load_sound();
      this.$router.push({ path: "/calequestion" });
    },

    load_sound(url_data) {
      var url = "./btn.mp3";
      // var con = new AudioContext();
      let AudioContext = window.AudioContext || window.webkitAudioContext;
      let audioCtx = AudioContext ? new AudioContext() : '';
      axios.get(url, { responseType: "arraybuffer" }).then(req => {  
        audioCtx.decodeAudioData(
          req.data,
          function(buffer) {        
            var source = audioCtx.createBufferSource();
            source.buffer = buffer;
            source.connect(audioCtx.destination);
            source.start(0);

          },
          function(e) {
            console.info("错误");
          }
        );
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.main {
  max-width: 768px;
  margin: 0 auto;
  height: 760px;
  background: url("../assets/开始答题/bg_1.png") no-repeat;
  background-size: 100% 100%;
  position: relative;

  .a1 {
    text-align: center;
    font-size: 16px;
    position: absolute;
    top: 300px;
   img{
      margin:0 auto; 
      width: 150px;
      height: 130px;
            margin-bottom: 5px;

   }
    
    p {
      margin: 0 15%;
    }
    h2 {
      color: rgb(16, 95, 243);
    }
    .p1 {
      color: black;
      font-weight: 600;
      font-size: 14px;
      text-align: left;
      padding-top: 10px;
            margin: 0 15%;
            

      span{
        padding: 0 10px
      }
    }
    .p2 {
      font-size: 12px;
      padding-top: 10px;
    }
  }
  .a2 {
    display: inline-block;
    position: absolute;
    top: 600px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    color: rgb(16, 95, 243);
    text-align: center;
    background-color: #fff;
    font-weight: 600;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
  }
}
</style>